<template>
    <div class="feedback">
        <div class="feedback-main">
        <bread-crumb :title="{group:'评价管理',name:'评价列表'}"></bread-crumb>
            <div class="feedback-main_content">
                <div>
                    <div class="contenttitle">
                        <span>评价管理</span>
                        <el-button type="text" @click="appeals">申诉列表</el-button>
                    </div>
                     <div class="feedback-main_contentFirst">
                         <div class="contentFirst-header">
                             <span>商品名称：</span><el-input v-model="goodsName" placeholder="请输入商品名称" clearable class="impor"></el-input>
                             <span>订单号：</span><el-input v-model="orderNo" placeholder="请输入订单号" clearable class="impor"></el-input>
                             <el-button class="search" type="primary" @click="submit">搜索</el-button>
                         </div>
                          <el-table
                            :data="tableData"
                            style="width: 100%"
                            v-loading="loading">
                                <el-table-column
                                    prop="goodsName"
                                    label="商品名称">
                                </el-table-column>
                                <el-table-column
                                    prop="content"
                                    label="评价内容">
                                </el-table-column>
                                <el-table-column
                                    prop="nickName"
                                    label="评价人">
                                </el-table-column>
                                <el-table-column
                                    prop="orderNo"
                                    label="订单号"
                                    width="185">
                                </el-table-column>
                                <el-table-column
                                    prop="star"
                                    label="评价打分"
                                    align="center">
                                </el-table-column>
                                <el-table-column
                                    prop="pics"
                                    label="评价图片"
                                    align="center">
                                    <template slot-scope="scope">
                                      <el-button v-if="scope.row.pics" type="text" size="mini" @click="openpics(scope.row.pics)">点击查看</el-button>
                                      <span v-else>用户未上传</span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                    prop="addTime"
                                    label="评价时间"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    width="150">
                                    <template slot-scope="scope">
                                     <el-button
                                        size="mini"
                                        type="primary" plain
                                        v-if="scope.row.isParent === 0"
                                        @click="reply(scope.row)">回复</el-button>
                                      <el-button
                                        size="mini"
                                        type="primary"
                                        v-else
                                        @click="open(scope.row)">查看</el-button>
                                    <span
                                        v-if="scope.row.isAppeal === 1" style="marginLeft:10px;padding:12px 0">申诉中</span>    
                                    <el-button
                                        size="mini"
                                        v-else
                                        @click="complain(scope.row)">申诉</el-button>
                                </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                              class="paging"
                              align="right"
                              @current-change="handleCurrentChange"
                              :current-page.sync="curPage"
                              hide-on-single-page
                              :page-size="pageSize"
                              layout="prev, pager, next, jumper"
                              :total="count">
                          </el-pagination>
                            <el-dialog title="回复评论" :visible.sync="dialogVisible" width="30%">
                            <span>
                                <el-input type="textarea" placeholder="请输入评论内容" v-model="textarea" rows='6'></el-input>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="sendon">确 定</el-button>
                            </span>
                        </el-dialog>
                        <el-dialog title="查看评价图片" :visible.sync="dialogVisible1" width="30%">
                            <span>
                                <div>
                                    <el-popover v-for="(item,index) in imgUrl" :key="index" placement="right" title trigger="hover" prop="item" class="dialog-img">
                                      <img :src="item" style="width:500px" lazy/>
                                      <img
                                        slot="reference"
                                        :src="item"
                                        alt
                                        style="height: 100px;width: 100px"
                                        lazy
                                      />
                                    </el-popover>
                                </div>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
                            </span>
                        </el-dialog>
                        <el-dialog title="查看申诉列表" :visible.sync="dialogVisible2" width="40%">
                            <span>
                                <el-table
                                    :data="tableData1"
                                    style="width: 100%"
                                    v-loading="loading1">
                                    <el-table-column
                                        prop="goodsName"
                                        label="商品名称">
                                    </el-table-column>
                                    <el-table-column
                                        prop="content"
                                        label="评价内容">
                                    </el-table-column>
                                    <el-table-column
                                        prop="commenter"
                                        label="评价人">
                                    </el-table-column>
                                    <el-table-column
                                        prop="appealInfo"
                                        label="申诉原因">
                                    </el-table-column>
                                    <el-table-column
                                        prop="state"
                                        label="申诉状态">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.state === 1" style="color:#67c23a;">申诉成功</span>
                                            <el-tooltip v-if="scope.row.state === 2" effect="dark" :content=scope.row.reason placement="top-start">
                                                <span style="color:#f56c6c;">申诉失败</span>
                                            </el-tooltip>
                                            <span v-else style="color:#409eff;">审核中</span>
                                        </template>
                                    </el-table-column>
                                    </el-table>
                                    <el-pagination
                                      class="paging"
                                      align="right"
                                      @current-change="handleCurrentChange1"
                                      :current-page.sync="curPage1"
                                      hide-on-single-page
                                      :page-size="pageSize"
                                      layout="prev, pager, next, jumper"
                                      :total="count1">
                                  </el-pagination>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
                            </span>
                        </el-dialog>
                     </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTime } from '@/utils/service.js'
import { mapState } from 'vuex'
import BreadCrumb from '@/views/components/Breadcrumb'
export default {
  name: 'Editor',
  data () {
    return {
      loading: false,
      loading1: false,
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      imgUrl: [],
      storeId: '',
      goodsName: '',
      orderNo: null,
      textarea: '',
      row: {},
      row1: {},
      value: '',
      tableData1: [],
      count: null,
      curPage: 1,
      count1: null,
      curPage1: 1,
      pageSize: 10,
    }
  },
  created () {
    this.findSonCommentApp()
  },
  methods: {
    async findSonCommentApp () {
      // 获取评价列表
      this.storeId = this.print.id
      let obj = {
        curPage: this.curPage,
        storeId: this.storeId
      }
      this.loading = true
      const res = await this.axios.findSonCommentApp(obj)
      if (res.data.code === 200) {
        this.loading = false
        this.tableData = res.data.data.list
        this.tableData.map(el => {
          el.addTime = getTime(el.addTime)
        })
        this.count = res.data.data.total
      }
    },
    async submit () {
      // 搜索
      let obj = {
        storeId: this.storeId,
        orderNo: this.orderNo || null,
        goodsName: this.goodsName,
        curPage:1
      }
      this.loading = true
      const res = await this.axios.findSonCommentApp(obj)
      if (res.data.code === 200) {
        this.loading = false
        this.tableData = res.data.data.list
        this.tableData.map(el => {
          el.addTime = getTime(el.addTime)
        })
      }
    },
    openpics (pics) {
      // 点击查看评价图片
      this.imgUrl = pics.split(',')
      this.dialogVisible1 = true
    },
    reply (row) {
      // 点击打开回复弹窗
      this.textarea = ''
      this.dialogVisible = true
      this.row = row
    },
    async sendon () {
      // 回复评价
      if (this.textarea) {
        let obj = {
          list:[
            {
              content: this.textarea,
              goodsId: this.row.goodsId,
              pics: this.row.pics,
              pid: this.row.id,
              specId: this.row.specId,
              star: this.row.star
            }
          ],
          orderId: this.row.orderId,
          nickName: this.row.nickName,
          storeId: this.row.storeId,
          uid: this.print.uid,
          orderNo: this.row.orderNo
        }
        const res = await this.axios.addComment(obj)
        if (res.data.code === 200) {
          this.$message({
            message: '回复成功',
            type: 'success',
            duration: 2000,
            onClose: () => {
              this.dialogVisible = false
              this.findSonCommentApp()
            }
          })
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      } else {
        this.$message({
          message: '内容不能为空',
          type: 'warning'
        })
      }
    },
    async storeAppeal () {
      // 申诉
      let obj = {
        commentId: this.row1.id,
        appealInfo: this.value,
        commentUid: this.print.uid,
        appealUid: this.print.uid,
        storeId: this.storeId,
        storeNo: this.print.storeNo,
        goodsId: this.row1.goodsId,
        goodsName: this.row1.goodsName,
        content: this.row1.content,
        commenter: this.row1.nickName
      }
      const res = await this.axios.storeAppeal(obj)
      if (res.data.code === 200) {
        this.$message({
          message: '申诉已提交',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.submit()
          }
        })
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    async open (row) {
      // 查看已回复的评论
      let obj = {
        id: row.id,
        goodsId: row.goodsId
      }
      const res = await this.axios.findSonComment(obj)
      let content = res.data.data.content
      const h = this.$createElement;
        this.$msgbox({
          title: '评论回复',
          message: h('p',  { style: 'backgroundColor:#fafafa;padding:10px;' }, [
            h('span', { style: 'fontSize: 15px' }, content)
          ]),
          confirmButtonText: '确定'
        })
        .then(()=>{

        })
        .catch(()=>{

        })
    },
    complain (row) {
      // 点击申诉
      this.$prompt('请输入申诉原因', '申诉', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '内容不能为空'
      })
        .then(({ value }) => {
          this.value = value
          this.row1 = row
          this.storeAppeal()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async appeals () {
      this.dialogVisible2 = true
      this.loading1 = true
      let obj = {
        storeId: this.storeId,
        page: this.curPage1,
      }
      const res = await this.axios.findAppeal(obj)
      this.loading1 = false
      this.tableData1 = res.data.list
      this.count1 = res.data.count
    },
    handleCurrentChange (val) {
      // 改变当前页码重新获取数据
      this.curPage = val
      this.findSonCommentApp()
    },
    handleCurrentChange1 (val) {
      // 改变当前页码重新获取数据
      this.curPage1 = val
      this.appeals()
    }
  },
  computed: {
    ...mapState({
      print: state => state.print.all
    })
  },
  components: {
    BreadCrumb
  }
}
</script>

<style lang="scss" scoped>
.feedback{
    display: flex;
    justify-content: center;
    .feedback-main{
        width: 1200px;
        background-color: #fff;
        padding: 20px;
        .feedback-main_content{
            border:1px solid rgba(229, 230, 234, 1);
            border-top: 0;
            margin: 15px 0;
            .contenttitle{
                box-sizing: border-box;
                padding: 10px;
                line-height: 28px;
                font-weight: bold;
                height: 50px;
                background-color: rgba(245, 245, 245, 1);
                border-top: 2px solid rgba(176, 184, 184, 1);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
    .contentFirst-header{
        display: flex;
        padding: 15px 10px;
        border-bottom:1px solid #ddd ;
        margin-bottom:15px ;
        span{
            min-width: 80px;
            line-height: 40px;
        }
        .impor{
            margin-right: 15px;
        }
    }
    .dialog-img+.dialog-img{
      margin-left: 25px;
    }
    .paging {
      margin-top: 50px;
    }
}
</style>
